<template>
  <div class="login-page">
    <div class="login-container">
      <h2>用户登录</h2>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="0" class="login-form">
        <el-form-item prop="userAccount">
          <el-input v-model="loginForm.userAccount" placeholder="账号" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="userPassword">
          <el-input v-model="loginForm.userPassword" type="password" placeholder="密码" prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" class="login-button" @click="handleLogin">登录</el-button>
        </el-form-item>
        <div class="login-options">
          <router-link to="/register">没有账号？立即注册</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/userStore'

const router = useRouter()
const userStore = useUserStore()
const loginFormRef = ref(null)
const loading = ref(false)

const loginForm = reactive({
  userAccount: '',
  userPassword: ''
})

const rules = {
  userAccount: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  userPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ]
}

const handleLogin = () => {
  loginFormRef.value.validate(async (valid) => {
    if (!valid) return

    loading.value = true
    try {
      const result = await userStore.login(loginForm)

      // 根据用户角色跳转
      if (result.userRole === 'admin') {
        router.push('/admin/dashboard')
      } else {
        router.push('/')
      }
    } catch (error) {
      console.error('登录失败:', error)
    } finally {
      loading.value = false
    }
  })
}
</script>

<style scoped>
/* 背景图的样式 */
.login-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* z-index: -1; <-- 已移除此行，这是导致空白页面的原因 */
  animation: cycleBackground 20s infinite;
}

/* 登录表单的样式 */
.login-container {
  width: 400px;
  padding: 30px;
  border-radius: 16px; /* 增大圆角，与主页风格统一 */
  position: relative;

  /* --- START: 毛玻璃效果核心代码 --- */
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  /* --- END: 毛玻璃效果核心代码 --- */
}

.login-container h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.login-form {
  width: 100%;
}

.login-button {
  width: 100%;
}

.login-options {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  font-size: 14px;
}

.login-options a {
  color: #409eff;
  text-decoration: none;
}

.login-options a:hover {
  text-decoration: underline;
}

/* 移除 main-layout 相关的样式，因为它们不属于这个页面 */

/* 定义背景滚动动画 */
@keyframes cycleBackground {
  0%, 20% { background-image: url('@/assets/background01.jpg'); }
  25%, 45% { background-image: url('@/assets/background02.jpg'); }
  50%, 70% { background-image: url('@/assets/background03.jpg'); }
  75%, 95% { background-image: url('@/assets/background04.jpg'); }
  100% { background-image: url('@/assets/background05.jpg'); }
}
</style>